/***	
* date：2018.02.26
* name: 首页的-index的JS文件
* author：hj
* remarks：null
*/


// 创建左侧产品导航
function createSubNavMenuFn(_obj){
	this.objVal = _obj;
	this.init();
 }
  createSubNavMenuFn.prototype={
	init:function(){
	var _self = this;
	_self.getData();
    },
	getData:function(){
		var _self = this;
		ajaxFn(APILIST.subNavJson,function(_data){
			_self.createDom(_data);
			_self.liMouseEvent();
		});
	},
	createDom:function(_d){
		var _self= this;
		var _d = _d.subNavData;
		var _len  = _d.length;
			// console.log(_d);
		for(var i=0;i<_len;i++){
			$('<li/>')
				.html( _d[i].name)
				.html(function(){
					$('<div/>',{
						class:'popUpDiv'
					})
					.html(function(){
						$('<ul/>')
							.html(function(){
								var _len=_d[i].list.length;
								for(var j=0;j<_len;j++){
									$('<li/>')
									.html(_d[i].list[j])
									.appendTo($(this))
								}
							})
							.appendTo($(this));
					})
					.appendTo($(this));
				})
				.appendTo( _self.objVal ); 
		}
		_self.liMouseEvent(this.objVal);
	},
	liMouseEvent:function(){
		var _self  = this;
		_self.objVal
			.children()
				.on({
					mouseover:function(){
					$(this)
						.children('.popUpDiv')
						.show();
					},
					mouseout:function(){
						$(this)
						.children('.popUpDiv')
						.hide();
					}

				});
	}
}


// 轮播图
function sliderWrapFn(_config){
	for( i in _config){
		this[i] = _config[i] ;
	}

	this.inx = 0
	this.init();
 }
 sliderWrapFn.prototype={
	init:function(){
		var _self = this;
		_self.getData();
	},
	getData:function(){
		var _self = this;
		ajaxFn(APILIST.sliderJson,function(_data){
			if(_data.code!=200){
				console.log(_data.message);
				return false;
			}

			_self.createDom(_data.imgUrl);
			_self.createPointer(_data.imgUrl);
			_self.leftBtnEvent(_data.imgUrl);
			_self.rightBtnEvent(_data.imgUrl);
			_self.pointerBtnEvent();
		});
	},	
	// 生成大图
	createDom:function(_d){
		// console.log(_d)
		var _self = this;
		var _dataLength = _d.length;
		for(var i=0;i<_dataLength;i++){
			$('<li/>')
				.html( '<img src='+ _d[i] +' />'  )
				.appendTo( _self.imgId );
			}
			// 根据图片的数量，设置ul的宽度
			_self.imgId.css('width',_dataLength * 997 );
	},
	// 生成小白点
	createPointer:function(_d){
		var _self = this;
		var _dataLength = _d.length;
		for(var i=0;i<_dataLength;i++){
			// _data[i]
			$('<li/>').appendTo( _self.pointerBtnId );
		}
		// 每个小白点所占用的宽度
		var _pointWrap_width=_dataLength * 27;
		// 小白点的父容器的宽度
		_self.sliderPointerWrapId.css({
			'width':_pointWrap_width,
			'marginLeft':-_pointWrap_width/2
		}); 
		// 小白点半透明的宽度和位置
		_self.sliderPointerWrapBgId.css({
			'width':_pointWrap_width,
			'marginLeft':-_pointWrap_width/2
		});
	},
	leftBtnEvent:function(_d){
		var _self = this;
		var _dataLength = _d.length;
		_self.leftBtnId.on('click',function(){
		if(_self.inx<(_dataLength-1)){
			_self.inx++;
		}else{
			_self.inx=0;
		}	
		_self.animateFn(_self.imgId,_self.inx);
		_self.switchPointerRedFn( _self.inx );
		});
	},	
	rightBtnEvent:function(_d){
		var _self = this;
		var _dataLength = _d.length;
		_self.rightBtnId.on('click',function(){
		if(_self.inx>0){
			_self.inx--;
		}else{
			_self.inx=(_dataLength-1);
		}
		_self.animateFn(_self.imgId,_self.inx);
		_self.switchPointerRedFn( _self.inx );
		});
	},
	// 小白点按钮事件
	pointerBtnEvent:function(){
		var _self = this;
		// 小白点list
		var _pBtn = _self.pointerBtnId.children();
		_pBtn.on('click',function(){
			_self.inx=$(this).index();
			_self.animateFn(_self.imgId,_self.inx);
			$(this)
				.addClass('redli')
				.siblings().removeClass();		
		});
	    _self.switchPointerRedFn( 0 );
	},
	// 动画方法
	animateFn:function(_n,_inx){
		var _self = this;
		_n.stop().animate({
	    'left':-(996* _inx)
		},'normal');
	},
	// 小白点红色样式左键按钮切换
	switchPointerRedFn:function(_n){
		var _self = this;
		var _pBtn = _self.pointerBtnId.children();
		_pBtn.eq( _n )
			.addClass('redli')
			.siblings().removeClass();
	}
}

// index页面的享生活
function goodsListWrapFn(_config){
	this.goodsListId = _config;
	this.init();
}
goodsListWrapFn.prototype={
	init:function(){
		var _self = this;
		_self.getData();
	},
	getData:function(){
		var _self = this;
		ajaxFn(APILIST.goodsListJson,function(_data){
			_self.createDom(_data.goods);
		});
	},
	createDom:function(_d){
		var _self = this;
		for(var i=0;i<_d.length;i++){
			var _str ='';
			if(i<2){
				_str = 'goodsWrap mR_10 gw_bgimg_'+(i+1)+' gw_bgcolor_'+(i+1);
			} else {
		    	 _str = 'goodsWrap gw_bgimg_'+(i+1)+' gw_bgcolor_'+(i+1);
			}

			$('<a/>',{})
				.attr({
					'href':'http://localhost:4567/product.html?ids='+_d[i].goodsId,
					'target':'_blank'
				})
				.html(function(){
					$('<div/>',{
						'class':_str
						})
						.html(function(){
							$('<dl/>',{
								'class':'bg_'+(i+1)
								})
								.html(function(){
									$('<dt/>',{})
										.html(_d[i].title)
										.appendTo($(this));
									$('<dd/>',{})
										.html(_d[i].describe)
										.appendTo($(this));	
								})
								.appendTo($(this));
						})
						.appendTo($(this));

				})
				.appendTo( this.goodsListId )
		}		
	}
}


